<template>
  <div class="leave_list">
    <el-dialog
      :title="isOff ? '撤销请假' : '请 假'"
      :visible.sync="dialogVisible"
      size="small" @close="handleCancel">
      <div class="leave_cont">
        <el-row>
          <el-col :span="3">请假人：</el-col>
          <el-col :span="21">{{student.name}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">{{isOff ? '请选择撤销请假时间：' : '请选择请假时间：'}}</el-col>
        </el-row>
        <el-scrollbar class="import_table" wrap-class="student_scroll">
          <el-row v-if="list.length == 0">
            暂无可请假的课时
          </el-row>
          <el-row v-loading="isLoading === null" style="min-height:200px" v-else>
            <el-col :span="24">
              <el-checkbox-group v-model="radioTime">
                <el-checkbox v-for="item in list" :label="item.id" :key="item.id">{{format(item)}}</el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="handleSubmit" :disabled="!radioTime.length > 0">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from 'api/train'
export default {
  props: {
    isOff: {
      type: Boolean,
      default: false
    },
    student: Object
  },
  mounted () {
    let params = {studentId: this.student.studentId, classId: this.$route.query.id}
    if (!this.isOff) {
      api.studentLeaveSchedule(params).then((res) => {
        this.list = res.data
        this.isLoading = true
      })
    } else {
      api.studentCancelLeaveSchedule(params).then((res) => {
        this.list = res.data
        this.isLoading = true
      })
    }
  },
  data () {
    return {
      loading: false,
      list: [],
      isLoading: null,
      dialogVisible: true,
      radioTime: []
    }
  },
  methods: {
    handleCancel () { // 取消
      this.$emit('input', false)
    },
    handleSubmit () { // 发起请求
      if (!this.isOff) {
        api.studentLeave(JSON.stringify(this.radioTime), {context: this}).then(() => {
          this.$emit('success').$emit('input', false)
        })
      } else {
        api.studentCancelLeave(JSON.stringify(this.radioTime), {context: this}).then(() => {
          this.$emit('success').$emit('input', false)
        })
      }
    },
    format (item) {
      let date = new Date(item.beginDate)
      // let time = new Date(1990, 0, 1).getTime()
      let array = ['日', '一', '二', '三', '四', '五', '六']
      return `${date.format()} 周${array[date.getDay()]} ${new Date(item.startTime).format('hh:mm')}-${new Date(item.endTime).format('hh:mm')}`
    }
  }
}
</script>
<style lang="scss">
.student_scroll{
  max-height:330px;
  overflow-y: scroll;
}
.leave_list{
  .el-dialog--small{
    min-width:750px;
  }
  .el-checkbox-group{
    width:100%;
  }
  .el-checkbox-group .el-checkbox{
    width:45%;
    margin:0 2%;
    margin-bottom:18px;
  }
  .el-col{
    margin:0 0 22px 0;
  }
  .el-dialog__body{
    padding-bottom:0;
  }
}
</style>
